<template>
  <div class="crm-page home-page">
    <div class="page-header">订单详情</div>
    <div class="page-content transparent">
      <div class="page-card">
        <div class="card-title">
          <el-button class="back-btn" size="medium" type="text" icon="el-icon-back" @click="$router.back()">返回</el-button>
        </div>
        <div class="page-card-content">
          <div class="item-title" style="margin-top:20px">
            基本信息
          </div>
          <div class="card-item">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">订单号：</span>
                <span class="content">{{ data.no }}</span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">客户名：</span>
                <span class="content">
                  <span class="app-link" @click="gotoMainPage('customer/info',{id:data.customerId})">  {{ data.customerName }}</span>
                </span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">合同编号：</span>
                <span class="content">
                  <span class="app-link" @click="gotoMainPage('contract/info',{id:data.contractId})">  {{ data.contractNumber }}</span>
                </span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">订单状态：</span>
                <span class="content">{{ data.statusText }}</span>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                <span class="title">所有人：</span>
                <span class="content">{{ data.owner }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
          <div class="page-card">
            <div class="page-card-content">
              <div class="item-title no-border">
                <el-tabs v-model="activeTabName">
                  <el-tab-pane label="详细信息" name="1" />
                  <el-tab-pane label="商品详情" name="2" />
                  <el-tab-pane v-if="data.status>1" label="审批流程" name="3" />
                </el-tabs>
              </div>
              <div v-if="activeTabName==='1'" class="card-item">
                <el-row :gutter="10">
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">客户名：</span>
                    <span class="content">{{ data.customerName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">所有人：</span>
                    <span class="content">{{ data.owner }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">下单日期：</span>
                    <span class="content">{{ formatTime( data.placeOrderDate,'YYYY-MM-DD') }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">整单折扣：</span>
                    <span class="content">{{ data.discount | moneyFormat }}%</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">金额：</span>
                    <span class="content">{{ data.amount }}</span>
                  </el-col>

                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">开票地址：</span>
                    <span class="content">
                      {{ data.invoiceAddress }}
                    </span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">收货地址：</span>
                    <span class="content">
                      {{ data.receiveAddress }}
                    </span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">备注：</span>
                    <span class="content">
                      {{ data.remark }}
                    </span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">创建人：</span>
                    <span class="content">{{ data.createName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">上次修改人：</span>
                    <span class="content">{{ data.updateName }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">创建时间：</span>
                    <span class="content">{{ formatTime(data.createTime) }}</span>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <span class="title">上次修改时间：</span>
                    <span class="content">{{ formatTime(data.updateTime) }}</span>
                  </el-col>
                </el-row>
              </div>
              <div v-if="activeTabName==='2'" class="card-item">
                <el-table
                  border
                  :data="data.orderDetailList"
                >
                  <el-table-column
                    type="index"
                    width="55"
                    size="mini"
                    align="center"
                    label="序号"
                  />
                  <el-table-column show-overflow-tooltip prop="productName" label="产品名称">
                    <!-- <template slot-scope="{row}">
                      <el-input v-model="row.productName" placeholder="产品名称" />
                    </template> -->
                  </el-table-column>
                  <el-table-column show-overflow-tooltip prop="productCode" label="产品编码">
                    <!-- <template slot-scope="{row}">
                      <el-input v-model="row.productCode" placeholder="产品编码" />
                    </template> -->
                  </el-table-column>
                  <el-table-column align="right" prop="unitPrice" label="单价">
                    <template slot-scope="{row}">
                      {{ formatMoney(row.unitPrice) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="right" prop="num" label="数量">
                    <!-- <template slot-scope="{row}">
                      <el-input v-model="row.num" placeholder="数量" />
                    </template> -->
                  </el-table-column>
                  <el-table-column prop="unit" label="单位">
                    <!-- <template slot-scope="{row}">
                      <el-input v-model="row.unit" placeholder="单位" />
                    </template> -->
                  </el-table-column>
                  <el-table-column width="100" align="right" prop="minNum" label="最小起订量">
                    <!-- <template slot-scope="{row}">
                      <el-input v-model="row.minNum" placeholder="最小起订量" />
                    </template> -->
                  </el-table-column>
                  <el-table-column prop="specs" label="规格">
                    <!-- <template slot-scope="{row}">
                      <el-input v-model="row.specs" placeholder="规格" />
                    </template> -->
                  </el-table-column>
                  <el-table-column align="right" prop="discount" label="折扣">
                    <template slot-scope="{row}">
                      {{ formatMoney(row.discount) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="right" label="金额">
                    <template slot-scope="{row}">
                      {{ formatMoney(row.amount) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="specs" width="100" label="交货日期">
                    <template slot-scope="{row}">
                      {{ row.deliveryDate | dateFormat('YYYY-MM-DD') }}
                    </template>
                  </el-table-column>
                  <el-table-column align="left" show-overflow-tooltip prop="remark" label="备注">
                    <!-- <template slot-scope="{row}">
                      <el-input v-model="row.remark" style="width:100%" />
                    </template> -->
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="activeTabName==='3'" class="card-item">
                <div class="approve-status">
                  <span>状态：{{ data.statusText }}</span>
                </div>
                <ApproveProcess type="10" :ext-id="data.id" />
              </div>
            </div>
          </div>

          <InvoiceCard
            v-if="data.customerId"
            type="10"
            :order-id="data.id"
            :order-no="data.no"
            :contract-id="data.contractId"
            :contract-no="data.contractNumber"
            :customer-id="data.customerId"
            :customer-name="data.customerName"
          />
          <PayCard
            v-if="data.customerId"
            type="10"
            :order-id="data.id"
            :order-no="data.no"
            :contract-id="data.contractId"
            :contract-no="data.contractNumber"
            :customer-id="data.customerId"
            :customer-name="data.customerName"
          />

        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
          <ActivityCard
            :data="{
              name:data.customerName,
              relateName:data.name,
              relateId:data.id
            }"
            :type="10"
            @change="handleCardChange"
          />
          <ActivityListCard v-if="data.id" ref="listCard" :relateid="data.id" :type="10" />
        </el-col>

      </el-row>

    </div>
  </div>
</template>
<script>
import ActivityCard from '@/components/ActivityCard'
import PayCard from '@/components/InfoCard/PayCard'
import InvoiceCard from '@/components/InfoCard/InvoiceCard'
import ApproveProcess from '@/components/Approve/ApproveProcess'
import ActivityListCard from '@/components/ActivityListCard'
import { getOrder } from '@/api/order'

import { getEnumText, orderStatus, currencys } from '@/utils/enums'
import { formatTime } from '@/utils/tools'
import BigNumber from 'bignumber.js'
export default {
  name: 'CustomerInfo',
  components: { ActivityCard, ActivityListCard, PayCard, InvoiceCard, ApproveProcess },
  data() {
    return {
      activeTabName: '1',
      data: {
        statusText: '',
        fileList: []
      }

    }
  },
  mounted() {
    const id = this.$route.query.id
    getOrder({ id }).then(res => {
      this.data = res
      this.data.statusText = getEnumText(orderStatus, this.data.status)
      this.data.amount = BigNumber(this.data.amount).toFixed(2)
      this.data.currencyText = getEnumText(currencys, this.data.currency)
      if (res.invoiceAddress) {
        this.data.invoiceAddress = `${res.invoiceAddress.province}${res.invoiceAddress.city}${res.invoiceAddress.county}${res.invoiceAddress.address}`
      }
      if (res.receiveAddress) {
        this.data.receiveAddress = `${res.receiveAddress.province}${res.receiveAddress.city}${res.receiveAddress.county}${res.receiveAddress.address}`
      }
    })
  },
  methods: {
    formatTime,
    handleCardChange() {
      this.$refs.listCard.refresh()
    }

  }
}
</script>

